<template>
  <div class="page">
    <p>CMS 2.0 WEB Vue3 框架模板搭建</p>
    <div>
      我是普通模板页面，
      包含完整vue3 props、ref、reactive、watch、computed、生命周期使用教程
    </div>

    <hr />
    <div>
      <div>字体图标使用示例：</div>
      <div>
        <span>unicode:</span>
        <i class="iconfont">&#xe679;</i>
      </div>
      <div>
        <span>font-class:</span>
        <i class="iconfont icon_aply_nor"></i>
      </div>
      <div>
        <span>svg:</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon_aply_nor" />
        </svg>
      </div>
    </div>

    <hr />
    <div>
      <p class="h1">1级标题</p>
      <p class="h2">2级标题</p>
      <p class="number">132465</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  defineProps, PropType,
  ref, reactive, watch, computed,
  onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured
} from 'vue';

export interface User {
  name: string,
  age: number,
  sex?: boolean
}

const props = defineProps({
  num: {
    type: Number as PropType<Number>,
    required: false,
    default: 0
  },
  str: {
    type: String as PropType<String>,
    required: false,
    default: '文字'
  },
  obj: {
    type: Object as PropType<User>,
    required: false,
    default: () => {
      return <User>{}
    }
  },
  arr: {
    type: Array as PropType<User[]>,
    required: false,
    default: () => {
      return []
    }
  },
})

console.log(props);

const age = ref<number>(16);
const date = ref('');

const user: User = reactive({
  name: 'tom',
  sex: true,
  age: 18
})

// === vue3 watch 写法 =========
watch(age, (oldVal, newVal) => {
  console.log('age watch被触发：', oldVal, newVal);
});
watch(date, (oldVal, newVal) => {
  console.log('date watch被触发：', oldVal, newVal);
});
watch(user, (oldVal, newVal) => {
  console.log('user watch被触发：', oldVal, newVal);
});

// === vue3 computed 写法 =========
const getUserAge = computed(() => {
  return user.name + '的年龄' + age.value;
});
console.log(getUserAge.value);

// === vue3 生命周期 写法 =========
onBeforeMount(() => {
  console.log('载入前、onBeforeMount');
});
onMounted(() => {
  console.log('载入后、onBeforeMount');
});
onBeforeUpdate(() => {
  console.log('更新前、onBeforeMount');
});
onUpdated(() => {
  console.log('更新后、onBeforeMount');
});
onBeforeUnmount(() => {
  console.log('销毁前、onBeforeMount');
});
onUnmounted(() => {
  console.log('销毁后、onBeforeMount');
});
onActivated(() => {
  console.log('缓存组件进入后、onBeforeMount');
});
onDeactivated(() => {
  console.log('缓存组件离开前、onBeforeMount');
});
onErrorCaptured(() => {
  console.log('组件异常、onBeforeMount');
});
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
}
</style>
